<template>
  <div class="upwrapper">
    <div class="upcoming">
      <sticky-card
        v-for="item of itemLists"
        :key="item.id"
        :time="item.time"
        :tag="item.tag"
        :imgUrl="item.imgUrl"
        :title="item.title"
        :detail="item.detail"
      ></sticky-card>
    </div>
  </div>
</template>
<script>
import Bscroll from "better-scroll";
import StickyCard from "./components/StickyCard";
import axios from "axios";
import ObserveDom from "@better-scroll/observe-dom";
Bscroll.use(ObserveDom);
export default {
  name: "upcoming",
  components: {
    StickyCard,
  },
  data() {
    return {
      itemLists: [],
    };
  },
  methods: {
    async getUpcomingCardData() {
      let res = await axios.get("/api/upcoming.json");
      res = res.data;
      if (res.ret && res.data) {
        const result = res.data;
        this.itemLists = result.itemLists;
      }
    },
  },
  mounted() {
    this.getUpcomingCardData().then(() => {
      this.scroll = new Bscroll(".upwrapper", {
        click: true,
        scrollbar: true,
        observeDOM: true,
      });
    });
  },
};
</script>
<style lang="scss" scoped>
.upwrapper {
  height: 82vh;
  .upcoming {
  }
}
</style>